<template>
	<view class="order">
		<view class="sticky-tabs">
			<view class="nav">
				<view class="back" @click="goBack">
					<uni-icons type="back" :size="22" color="#333333" v-if="isShowBack"></uni-icons>
				</view>
				<view class="search-content">
					<image src="../../static/index/search.png" mode=""></image>
					<input type="请输入" v-model="search" placeholder="请输入" placeholder-class="input-placeholder" />
					<view class="search-btn" @click="handleToSearch">搜索</view>
				</view>
			</view>
			<view class="tabbar">
				<view @click="onTab(0)" :id="tab==0?'select':''">全部<i v-if="tab == 0"></i></view>
				<view @click="onTab(1)" :id="tab==1?'select':''">待付款<i v-if="tab == 1"></i></view>
				<view @click="onTab(2)" :id="tab==2?'select':''">待使用<i v-if="tab == 2"></i></view>
				<view @click="onTab(3)" :id="tab==3?'select':''">服务中<i v-if="tab == 3"></i></view>
				<view @click="onTab(4)" :id="tab==4?'select':''">待评价<i v-if="tab == 4"></i></view>
				<view @click="onTab(7)" :id="tab==7?'select':''">退款<i v-if="tab == 7"></i></view>
			</view>
		</view>
		<mescroll-body height="500px" @init="mescrollInit" :up="up" :down="down" @down="downCallback" @up="upCallback">
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index" @click.stop="toContent(item)">
					<view class="name">
						<view class="logo" v-if="item.type == 1">
							<view class="inner-img">
								<image src="../../static/order/a.png"></image>
							</view>
							<text>{{item.service.title}}</text>
						</view>
						<view class="logo" v-if="item.type == 2">
							<view class="inner-img">
								<image src="../../static/order/h.png"></image>
							</view>
							<text>{{item.hotel_name}}</text>
						</view>
						<view class="logo" v-if="item.type == 3">
							<view class="inner-img">
								<image src="../../static/order/l.png"></image>
							</view>
							<text>{{item.scenic_name}}</text>
						</view>
						<view class="logo" v-if="item.type == 4">
							<view class="inner-img">
								<image src="../../static/order/m1.png"></image>
							</view>
							<text>{{item.cinema_name}}</text>
						</view>
						<view class="status" v-if="item.status==1">
							<u-count-down
							separator-color="red"
							color="red"
							 :show-days="false"
							 :show-hours="false"
							 font-size="26"
							 ref="uCountDown" :timestamp="item.close_order_time" v-if="item.close_order_time > 0" @end="onTimeOver(index)"></u-count-down>
							<text style="color: #EF4C28;">未支付</text>
						</view>
						<view class="status" v-if="item.status==2">
							<text style="color: #04A257;"
								v-if="item.type == 1 && item.jiedan_time == 0 && item.return_status ==1">待接单</text>
							<text style="color: #04A257;"
								v-if="item.type == 1 && item.jiedan_time>0 && item.return_status ==1">已接单</text>
							<text style="color: #04A257;" v-if="item.type !=1&& item.return_status ==1">待使用</text>
							<!-- 退款状态:1=未退款,2=申请中,3=商家同意退款,4=已退款 -->
							<text style="color: #04A257;" v-if="item.return_status == 2">退款待审核</text>
							<text style="color: #04A257;" v-if="item.return_status == 3">商家同意退款/平台待处理</text>
							<text style="color: #04A257;" v-if="item.return_status == 4">已退款</text>
						</view>
						<view class="status" v-if="item.status==3">
							<text style="color: #04A257;">服务中/已出票</text>
						</view>
						<view class="status" v-if="item.status==4">
							<text style="color: #FF0000;" v-if="item.sfter_sales == 2">投诉中</text>
							<text style="color: #FF0000;" v-else-if="item.sfter_sales == 3">投诉已处理</text>
							<text style="color: #6D6F6F;" v-else>已使用</text>
						</view>
						<view class="status" v-if="item.status==5">
							<text style="color: #FF0000;" v-if="item.sfter_sales == 2">投诉中</text>
							<text style="color: #FF0000;" v-else-if="item.sfter_sales == 3">投诉已处理</text>
							<text style="color: #FF8D00;" v-else>待评价</text>
						</view>
						<view class="status" v-if="item.status==6">
							<text style="color: #FF0000;" v-if="item.sfter_sales == 2">投诉中</text>
							<text style="color: #FF0000;" v-else-if="item.sfter_sales == 3">投诉已处理</text>
							<text style="color: #6D6F6F;" v-else>已评价</text>
						</view>
						<view class="status" v-if="item.status==7">
							<text style="color: #6D6F6F;">已退款</text>
						</view>
						<view class="status" v-if="item.status==8">
							<text style="color: #6D6F6F;">已取消</text>
						</view>
						<view class="status" v-if="item.status == 99">
							<text style="color: #6D6F6F;">已过期</text>
						</view>

					</view>

					<view class="product" v-if="item.type == 1">
						<image :src="item.service.images[0]" @error="imageError($event,item)" mode="aspectFill"></image>
						<view class="detail">
							<view class="title">{{item.service.title}}</view>
							<!-- <view class="text">{{item.subscribe_time}}</view> -->
							<view class="text">预约时间：{{item.subscribe_time}}</view>
							<view class="text">下单时间：{{item.createtime}}</view>
							<view class="text" v-if="item.add_time_info.add_time">加钟时间:{{item.add_time_info.add_time}}分钟
							</view>
							<view class="text" v-if="item.add_time_info.add_time">
								总金额:￥{{ item.price | addPrice(item.add_time_info.price)}}</view>
							<view class="text" v-else>总价:￥{{item.price}}</view>
						</view>
					</view>
					<view class="product" v-if="item.type == 2">
						<image :src="item.hotel_image" mode="aspectFill" @error="imageError($event,item)"></image>
						<view class="detail">
							<view class="title">{{item.room_name}}</view>
							<view class="text">{{item.createtime}}</view>
							<view class="text">总价:￥{{item.price}}</view>
						</view>
					</view>
					<view class="product" v-if="item.type == 3">
						<image :src="item.images[0]" mode="aspectFill" @error="imageError($event,item)"></image>
						<view class="detail">
							<view class="title">{{item.product_name}}</view>
							<view class="text">{{item.travelDate}}</view>
							<view class="text">总价:￥{{item.price}}</view>
						</view>
					</view>
					<view class="product" v-if="item.type == 4">
						<image :src="item.pic" mode="aspectFill" @error="imageError($event,item)"></image>
						<view class="detail">
							<view class="title">{{item.film_name}}</view>
							<view class="text">{{item.createtime}}</view>
							<view class="text">总价:￥{{item.price}}</view>
						</view>
					</view>

					<!--1=未支付,2=待使用,3=服务中/已出票,4=已使用,5=待评价,6=已评价,7=已退款,8=已取消 -->
					<view class="btn">
						<!-- 待付款 -->
						<view class="box" v-if="item.status == 1">
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="cancelOrder(item)">
								取消订单</view>
							<view style="border: 1rpx solid #F16344;color: #F16344;" @click.stop="payment(item)">立即付款
							</view>
						</view>
						<view class="box" v-if="item.status == 8 || item.status == 99">
							<view style="border: 1rpx solid #CFD0D1;color: #666;" @click.stop="cancelOrder(item)">删除订单
							</view>
						</view>
						<!-- 待使用 -->
						<view class="box" v-if="item.status == 2 && item.type != 1">
							<view style="border: 1rpx solid #04A257;color: #04A257;">立即使用</view>
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,6)"
							 v-if="item.type != 4">
								退款/售后
							</view>
							
						</view>
						
						
						<view class="box" v-if="item.status == 3 && item.type == 1 && item.jiedan_time>0">
							<view style="border: 1rpx solid #04A257;color: #04A257;" @click.stop="onComplant(item)">订单结束</view>
						</view>
						
						<!-- 待接单 -->
						<view class="box" v-if="item.status == 2 && item.type == 1">
							<view style="border: 1rpx solid #04A257;color: #04A257;" @click.stop="onStart(item)" v-if="item.return_status ==1 && item.jiedan_time>0">开始服务</view>
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,6)"
							 v-if="item.type != 4 && item.return_status == 1">
								退款/售后
							</view>
							<view style="border: 1rpx solid #FFA126;color: #FFA126;" @click.stop="toClose(item)"
								v-if="item.return_status == 2 || item.return_status == 3">
								取消退款
							</view>
						</view>
						<!-- 已使用 -->
						<view class="box" v-if="item.status == 4">
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,6)"
							 v-if="item.type != 4 && item.sfter_sales==1">
								退款/售后
							</view>
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,4)">
								立即评价
							</view>
							<view style="border: 1rpx solid #FFA126;color: #FFA126;" @click.stop="rebook(item)">再次预定
							</view>
							<view v-if="item.type != 1" style="border: 1rpx solid #CFD0D1;color: #333333;"
								@click.stop="invoice(item)">开发票
							</view>
						</view>
						<view class="box" v-if="item.status == 6">
							<view style="border: 1rpx solid #FFA126;color: #FFA126;" @click.stop="rebook(item)">再次预定
							</view>
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" v-if="item.type != 1"  @click.stop="invoice(item)">开发票
							</view>
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,6)"
							 v-if="item.type != 4 && item.sfter_sales==1">
								退款/售后
							</view>
						</view>
						<!-- 退款 -->
						<view class="box" v-if="item.status == 7">
							<view style="border: 1rpx solid #CFD0D1;color: #333333;">查看详情</view>
							<!-- <view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,6)">
								退款/售后
							</view> -->
						</view>
						<!-- 待评价 -->
						<view class="box" v-if="item.status == 5">
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,4)">
								立即评价
							</view>
							<view style="border: 1rpx solid #FFA126;color: #FFA126;" @click.stop="rebook(item)">再次预定
							</view>
							<view v-if="item.type != 1" style="border: 1rpx solid #CFD0D1;color: #333333;"
								@click.stop="invoice(item)">开发票
							</view>
							<view style="border: 1rpx solid #CFD0D1;color: #333333;" @click.stop="toOperation(item,6)"
							 v-if="item.type != 4">
								退款/售后
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<u-modal v-model="show" show-cancel-button :content="'是否'+((currentOrder.status == 1)?'取消':'删除')+'该订单'"
			mask-close-able @confirm="comfirmcancalOrder"></u-modal>
			
			<u-modal v-model="show_start" show-cancel-button content="确保技师已到达并开始服务"
				mask-close-able @confirm="onStartSuccess"></u-modal>
				<u-modal v-model="show_complant" show-cancel-button content="确保技师已完成服务"
					mask-close-able @confirm="onComplantSuccess"></u-modal>
					
					<u-modal v-model="show_close" show-cancel-button content="确认取消退款" mask-close-able
						@confirm="closeReturnOrder"></u-modal>
			
		<fjj-condition ref='condition' color="#EF5233" :list="menuList" @result="resultConditon" />
	</view>
</template>

<script>
	import Bignumber from '../../common/js/bignumber.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import fjjCondition from '@/components/fjj-condition/fjj-condition.vue';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				search: '',
				tab: 0,
				list: [],
				isShowBack: false,
				menuList: [{
					'title': '订单类型',
					'type': 'custom',
					'key': 'custom1',
					'isMutiple': true, //多选
					'detailList': [{
						title: '足浴按摩',
						value: "1",
						isSelected: true
					}, {
						title: '酒店',
						value: "2",
					}, {
						title: '门票',
						value: "3",
					}, {
						title: '电影票',
						value: "4",

					}],
				}],
				// 类型:1=上门服务,2=酒店,3=门票,4=电影票,5=开通会员
				screen: [1, 2, 3, 4], // 筛选结果
				down: {
					auto: false
				},
				up: {
					auto: true
				},
				page: 1,
				show: false,
				currentOrder: {},
				
				
				show_start:false,
				show_complant:false,
				show_close:false,
				currentOrder_start:{},
				currentOrder_complant:{},
				currentOrder_close: {},
			}
		},
		components: {
			fjjCondition,
		},
		filters: {
			addPrice(value, p2) {
				return new Bignumber(value).plus(new Bignumber(p2))
			}
		},
		onShow() {
			this.downCallback()
		},
		methods: {
			// 取消退款
			toClose(e){
				this.currentOrder_close = e
				this.show_close = true
			},
			closeReturnOrder(){
				let that = this
				this.request.httpTokenRequest({
					url: "/order/closeReturnOrder",
					method: "post"
				}, {
					order_id: this.currentOrder_close.id,
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						that.downCallback()
					}
				}, error => {})
			},
			onComplant(e){
				this.currentOrder_complant = e
				this.show_complant = true
			},
			onComplantSuccess(){
				let that = this
				this.request.httpTokenRequest({
					url: "/order/finishOrder",
					method: "post"
				}, {
					order_id:this.currentOrder_complant.id,
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						that.downCallback()
					}
				}, error => {})
			},
			onStart(e){
				this.currentOrder_start = e
				this.show_start = true
			},
			onStartSuccess(){
				let that = this
				this.request.httpTokenRequest({
					url: "/order/scanOrderQr",
					method: "post"
				}, {
					order_id:this.currentOrder_start.id,
				}).then(res => {
					this.$util.msg(res.msg)
					if (res.code == 0) {
						that.downCallback()
					}
				}, error => {})
			},
			onTimeOver(e){
				this.list[e].status = 8
			},
			handleToSearch() {
				this.downCallback()
			},
			onTab(e) {
				this.tab = e
				this.page = 1
				this.downCallback()
			},
			cancelOrder(item) {
				this.show = true
				this.currentOrder = item
			},
			comfirmcancalOrder() {
				var url = "order/delOrder"
				var that = this
				this.request.httpTokenRequest({
					url: url,
					method: "get"
				}, {
					order_id: this.currentOrder.id
				}).then(function(data) {
					if (data.code == 0) {
						that.$util.msg(data.msg)
						that.downCallback()
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			payment(item) {
				uni.navigateTo({
					url: "/otherpages/pay/pay?order_id=" + item.id
				})
			},
			toOperation(item, status) {
				uni.navigateTo({
					url: '/otherpages/order/operation?status=' + status + '&order_id=' + item.id + '&type=' + item
						.type
				})
			},
			invoice(item) {
				uni.navigateTo({
					url: '/otherpages/order/invoice/list'
				})
			},
			rebook(item) {
				// 类型:1=上门服务,2=酒店,3=门票,4=电影票,5=开通会员
				if (item.type == 1) {
					uni.navigateTo({
						url: '/otherpages/massage/massageDetail?id=' + item.service_id
					})
				} else if (item.type == 2) {
					uni.navigateTo({
						url: '/otherpages/hotel/hotelDetail?id=' + item.hotel_id
					})
				} else if (item.type == 3) {
					uni.navigateTo({
						url: '/otherpages/travelStrategy/scenicSpotDetails?id=' + item.scenic_id
					})
				} else if (item.type == 4) {
					uni.navigateTo({
						url: '/otherpages/film/chooseCinema?id=' + item.film_id
					})
				}
			},
			toContent(e) {
				// 类型:1=上门服务,2=酒店,3=门票,4=电影票,5=开通会员
				if (e.type == 4) {
					if (e.status == 1 || e.status == 8) {
						uni.navigateTo({
							url: '/otherpages/film/chooseCinema?id=' + e.film_id
						})
					} else {
						uni.navigateTo({
							url: '/otherpages/order/content/film?order_id=' + e.id
						})
					}

				}
				if (e.type == 2) {
					if (e.status == 1 || e.status == 8) {
						uni.navigateTo({
							url: '/otherpages/hotel/hotelDetail?id=' + e.hotel_id
						})
					} else {
						uni.navigateTo({
							url: '/otherpages/order/content/hotel?order_id=' + e.id
						})
					}

				}
				if (e.type == 3) {
					if (e.status == 1 || e.status == 8) {
						uni.navigateTo({
							url: '/otherpages/travelStrategy/scenicSpotDetails?id=' + e.scenic_id
						})
					} else {
						uni.navigateTo({
							url: '/otherpages/order/content/tourism?order_id=' + e.id
						})
					}

				}
				if (e.type == 1) {
					uni.navigateTo({
						url: '/otherpages/order/content/pedicure?order_id=' + e.id
					})
				}
			},
			imageError(e, item) {
				if (item.type == 1) {
					item.service.images[0] = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				} else if (item.type == 2) {
					item.hotel_image = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				} else if (item.type == 3) {
					item.images[0] = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				} else if (item.type == 4) {
					item.pic = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
				}
			},
			goBack() {
				uni.navigateBack()
			},
			onScreen() {
				this.$refs.condition.visibleDrawer = true;
			},
			resultConditon(e) {
				this.screen = e.str_result.custom1
				this.$refs.condition.visibleDrawer = false;
				this.downCallback()
			},
			downCallback() {
				this.list = []
				this.mescroll&&this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				var that = this
				this.request.httpTokenRequest({
					url: "order/getOrderList",
					method: "get"
				}, {
					fapiao_status: "0",
					status: this.tab,
					type: this.screen,
					page: page.num,
					key: this.search
				}).then(function(res) {
					if (res.code == 0) {
						that.list = [...that.list, ...res.data.data]
						that.mescroll.endSuccess(that.list.length,that.list.length == res.data.total?false:true)
					} else {
						that.mescroll.endErr()
					}
				})
			}
		},
		onLoad(option) {
			this.mescroll&&this.mescroll.lockDownScroll(false)
			if (option.type || option.type === 0) {
				this.tab = option.type
				this.isShowBack = true
			} else {
				this.isShowBack = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.order {
		min-height: 100vh;
		background: #F5F7F8;
		box-sizing: border-box;
	}
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: 0;
		background: #F5F7F8;
		// z-index: 1000;
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc(var(--status-bar-height) + 10px) 30rpx 0 30rpx;
		// height: 70px;
		width: 100vw;
		background: #F5F7F8;
		z-index: 99;

		.search-content {
			width: 600rpx;
			display: flex;
			align-items: center;

			border-radius: 32rpx;
			border: 1rpx solid #EF5233;
			backdrop-filter: blur(10px);
			padding: 7rpx 10rpx 7rpx 23rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				flex: 0 0 auto;
				margin-right: 20rpx;
			}

			input {
				width: 40%;
			}

			.input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
			}

			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				background: #EF5233;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-family: PingFangSC, PingFang SC;
				margin-left: auto;
			}
		}

		.icon {
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-left: 30rpx;

				image {
					width: 22rpx;
					height: 24rpx;
				}

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
				}
			}
		}
	}

	.tabbar {
		padding: 20rpx 32rpx 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// overflow: hidden;
		background-color: #F5F7F8;

		view {
			height: 39rpx;
			font-size: 30rpx;
			color: #08090A;
			line-height: 39rpx;
			position: relative;
			i {
				position: absolute;
				bottom: -4rpx;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 50rpx;
				height: 11rpx;
				background: rgba(239,82,51,0.6);
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.list {
		padding: 0 30rpx;

		.item {
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.name {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;

				.logo {
					display: flex;
					align-items: center;

					.inner-img {
						border-radius: 50%;
						margin-right: 10rpx;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
					
						flex: 0 0 auto;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 30rpx;
						color: #08090A;
						line-height: 42rpx;
						flex-grow: 1;
						width: 80%;
					}
				}

				.status {
					font-size: 26rpx;
					line-height: 37rpx;
					white-space: nowrap;
				}
			}

			.product {
				display: flex;
				margin: 30rpx 0 30rpx;

				image {
					width: 142rpx;
					height: 190rpx;
					margin-right: 23rpx;
				}

				.detail {
					flex: 1;

					.title {
						font-size: 28rpx;
						color: #656667;
						line-height: 40rpx;
					}

					.text {
						font-size: 24rpx;
						color: #656667;
						line-height: 33rpx;
						margin-top: 10rpx;
					}
				}
			}

			.btn {
				.box {
					display: flex;
					flex-direction: row-reverse;
					align-items: center;

					view {
						width: 180rpx;
						height: 58rpx;
						border-radius: 29rpx;
						font-size: 28rpx;
						line-height: 58rpx;
						text-align: center;
						margin-left: 30rpx;
					}
				}
			}

		}
	}
</style>